﻿
<template>



    <div>

        <!-- 添加按钮 -->
        <div class="btn-add">
        </div>
        <!-- 按条件选择 -->
        <div class="tab-filter-type">

            <div class="oh mt20">
                <h5 class="pull-left tr">提案年度：</h5>
                <ul class="tab-type ft14">
                    <li v-for="item in tadms" @click="selnd(item)"><span v-bind:class="{ active: item.isactive }" v-text="item.tadm"></span></li>
                </ul>
            </div>
        </div>
        <el-row style="height:350PX">
            <el-col :xs="9" :sm="9" class="mt10" style="padding:20PX">
                <div id="echartsbt" style="height:300px;"></div>

            </el-col>
            <el-col :xs="15" :sm="15" class="mt10" style="padding:20PX">
                <div id="echartszzt" style="height:300px;"></div>

            </el-col>


        </el-row>

        <el-row :gutter="20" style="height: 100px; margin: 15px;display:none">
            <el-col :xs="6" :sm="6" class="mt10">
                <div>
                    <el-card shadow="hover" style="  background-color: #faa64b !important;color: #fff !important;">
                        <i class="el-icon-s-data" style="float: right;font-size: 32px;opacity: .9;"></i>
                        <div style="font-size:22PX">{{zsl}}<span style="font-size: 12px;"> 个</span></div>
                        <div style="font-size:14px"> 提案总数</div>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="6" :sm="6" class="mt10">
                <div>
                    <el-card shadow="hover" style="  background-color: #15c377 !important;color: #fff !important;">
                        <i class="el-icon-s-check" style="float: right;font-size: 32px;opacity: .9;"></i>
                        <div style="font-size:22PX">{{ybl}}<span style="font-size: 14px;"> 个</span></div>
                        <div style="font-size:14px"> 已办理</div>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="6" :sm="6" class="mt10">
                <div>
                    <el-card shadow="hover" style="  background-color: #f96197 !important;color: #fff !important;">
                        <i class="el-icon-edit-outline" style="float: right;font-size: 32px;opacity: .9;"></i>
                        <div style="font-size:22PX"> {{blz}}<span style="font-size: 14px;"> 个</span></div>
                        <div style="font-size:14px"> 办理中</div>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="6" :sm="6" class="mt10">
                <div>

                </div>
            </el-col>
        </el-row>

        <!--<div class="tab-filter-type">

        <div class="input-group" style="width:520PX;margin-left:20PX;">
            <div class="input-group-btn">
                <button type="button" style="min-width:120PX;height: 34px;" class="btn btn-info  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{sear.colname}} <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li v-for="fi in tableop.collist" @click="sel(fi)"><a href="#" v-text="fi.colname"></a></li>
                </ul>
            </div>
            <input type="text" class="form-control" style="height: 34px;" v-model="seastr" v-on:keyup.enter="seardata" placeholder="输入关键字,按Enter键搜索">
            <span class="input-group-btn" v-show="seastr">
                <button class="btn btn-default" style="height: 34px;" @click="reset" type="button">重置</button>
            </span>
        </div>
    </div>-->
        <div class="default-tab ft14  hover-btn" style="overflow-x: inherit;padding:20PX;padding-top:10px">
            <base-table :pzoption="tableop">
            </base-table>
        </div>
        <!-- 表格 -->



    </div>
</template>

<script>
    module.exports = {
        props: ['pdata'],
        components: {
            'base-table': httpVueLoader('/ViewV5/Base/Vue/Table.vue')
        },
        data: function () {
            return {

                activeName: 'first',
                zsl: 0,
                ybl: 0,
                blz: 0,
                VIEWS: [],
                tadms: [],
                SelDSourceItem: {},
                alldata: [],
                tableop: {
                    title: "公示提案",
                    issel: false,
                    iscz: true,
                    height: 700,
                    isxh: false,
                    dataset: [],
                    czltabledata: [
                        {
                            colname: "查看", bttype: "primary", isshow: true, mangefun: function (rowdata) {
                                window.open("/ViewV5/AppPage/FORMBI/FormManage.html?vtype=0&piid=" + rowdata.ID, "_blank");
                            },
                        },
                    ],
                    collist: [
                        { colid: "tabh", colname: "提案编号", isshow: true, istip: true },
                        { colid: "CRUserName", colname: "提案人", isshow: true, istip: true },
                        { colid: "tafyrname", colname: "附议人", isshow: true, istip: true },
                        { colid: "Title", colname: "案由", isshow: true, istip: true, width: 220 },
                        { colid: "talb", colname: "类别", isshow: true, istip: true },
                        { colid: "isla", colname: "是否立案", isshow: true, istip: true },
                        { colid: "zbdw", colname: "主办单位", isshow: true, istip: true },
                        { colid: "xbdw", colname: "协办单位", isshow: true, istip: true },
                        { colid: "TaskName", colname: "办理情况", isshow: true, istip: true },
                        { colid: "myd", colname: "满意度", isshow: true, istip: true },
                        { colid: "djl", colname: "点击量", isshow: true, istip: true },
                        { colid: "ID", colname: "流程ID", isshow: false, istip: true },





                    ]
                }
            }
        },
        methods: {
            selnd: function (item) {
                var pro = this;
                _.forEach(pro.tadms, function (sel) {
                    sel.isactive = false;
                })
                item.isactive = true;
                if (item.tadm == '全部') {
                    pro.tableop.dataset = pro.alldata;
                } else {
                    var dv = new DataSet.View().source(pro.alldata);
                    var redata = [];
                    dv.transform({
                        type: 'filter',
                        callback(row) { // 判断某一行是否保留，默认返回true
                            return (row["tabh"] + "").indexOf(item.tadm) > -1;
                        }
                    });
                    redata = dv.rows;
                    pro.tableop.dataset = redata;
                }
                var nd = item.tadm;
                if (item.tadm == '全部') {
                    nd = "";
                }
                $.getJSON('/api/Bll/ExeAction?Action=TAXT_GETGSTADATA', { P2: nd }, function (resultData) {

                    var btdata = resultData.Result5;
                    var zztdata = resultData.Result6;

                    var myChartbt = echarts.init(document.getElementById('echartsbt'));
                    var optionbt = myChartbt.getOption();
                    optionbt.series[0].data = btdata;
                    myChartbt.setOption(optionbt);    


                    var myChartzzt = echarts.init(document.getElementById('echartszzt'));
                    var optionzzt = {
                        //  backgroundColor: '#00265f',
                        title: {
                            text: '代表团统计',
                            left: 'left',
                            textStyle: {
                                fontSize: 16
                            },
                            padding: [
                                5,  // 上
                                10, // 右
                                5,  // 下
                                10, // 左
                            ]

                        },
                        dataset: {
                            // 提供一份数据。
                            source: zztdata
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' }
                        },
                        grid: {
                            left: '0%',
                            top: '35px',
                            right: '0%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)",
                                    width: 1,
                                    type: "solid"
                                },
                            },

                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 50,
                                show: true,
                                splitNumber: 15,
                                textStyle: {
                                    color: "#333",
                                    fontSize: '12',
                                },
                            },
                        }],
                        yAxis: [{
                            type: 'value',
                            axisLabel: {
                                //formatter: '{value} %'
                                show: true,
                                textStyle: {
                                    color: "#333",
                                    fontSize: '12',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#dcdfe6",
                                    width: 1,
                                    type: "solid"
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#dcdfe6",
                                }
                            }
                        }],
                        series: [
                            {
                                name: "数量",
                                type: 'bar',
                                // barGap: 1, //柱子之间间距

                                itemStyle: {
                                    normal: {
                                        color: '#27d08a',
                                        opacity: 1,
                                        barBorderRadius: 2,
                                    }
                                }
                            }
                        ]
                    };
                    myChartzzt.setOption(optionzzt);    

                })

            },
            InitWigetData: function () {
                var pro = this;
              
                $.getJSON('/api/Bll/ExeAction?Action=TAXT_GETGSTADATA', { P2: "" }, function (resultData) {

                    if (resultData.Result.length > 0) {
                        pro.tableop.dataset = resultData.Result;
                        pro.alldata = resultData.Result;
                        pro.zsl = resultData.Result1;
                        pro.ybl = resultData.Result2;
                        pro.blz = resultData.Result3;
                        var temp = [{ tadm: "全部", isactive: true }];
                        for (var i = 0; i < resultData.Result4.length; i++) {
                            resultData.Result4[i].isactive = false;
                            temp.push(resultData.Result4[i]);
                        }
                        pro.tadms = temp;

                        ComFunJS.loadJs("/ViewV5/JS/Echart/echarts.min.js", function () {
                            var btdata = resultData.Result5;
                            var zztdata = resultData.Result6;

                            var myChartbt = echarts.init(document.getElementById('echartsbt'));
                            var myChartzzt = echarts.init(document.getElementById('echartszzt'));

                          
                            optionbt = {
                                title: {
                                    text: '提案类别统计',
                                    left: 'left',
                                    textStyle: {
                                        fontSize: 16
                                    },
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                },
                                legend: {
                                    bottom: 10,
                                    left: 'center',
                                    data: ['队伍建设类', '改善工作生活类', '管理效能类', '科学研究类', '其他类','人才培养类']
                                },
                                series: [
                                    {
                                        name: '类别',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['40%', '50%'],
                                        data: btdata,
                                        label: {
                                            show: false,
                                            position: 'center'
                                        },
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            optionzzt = {
                                //  backgroundColor: '#00265f',
                                title: {
                                    text: '代表团统计',
                                    left: 'left',
                                    textStyle: {
                                        fontSize: 16
                                    },
                                    padding: [
                                        5,  // 上
                                        10, // 右
                                        5,  // 下
                                        10, // 左
                                    ]

                                },
                                dataset: {
                                    // 提供一份数据。
                                    source: zztdata
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: { type: 'shadow' }
                                },
                                grid: {
                                    left: '0%',
                                    top: '35px',
                                    right: '0%',
                                    bottom: '0%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'category',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "rgba(255,255,255,.1)",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },

                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        rotate:50,
                                        show: true,
                                        splitNumber: 15,
                                        textStyle: {
                                            color: "#333",
                                            fontSize: '12',
                                        },
                                    },
                                }],
                                yAxis: [{
                                    type: 'value',
                                    axisLabel: {
                                        //formatter: '{value} %'
                                        show: true,
                                        textStyle: {
                                            color: "#333",
                                            fontSize: '12',
                                        },
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "#dcdfe6",
                                            width: 1,
                                            type: "solid"
                                        },
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: "#dcdfe6",
                                        }
                                    }
                                }],
                                series: [
                                    {
                                        name: "数量",
                                        type: 'bar',
                                        // barGap: 1, //柱子之间间距
                                    
                                        itemStyle: {
                                            normal: {
                                                color: '#27d08a',
                                                opacity: 1,
                                                barBorderRadius: 2,
                                            }
                                        }
                                    }
                                ]
                            };

                            myChartbt.setOption(optionbt);
                            myChartzzt.setOption(optionzzt);


                        })
                    }
                })

            },
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                pro.InitWigetData();
            })

        }
    };
</script>